<template>
  <div class="search-page">
    <h2>搜索</h2>
    <div>
      <MultiQuery v-if="resource.column.length>0" ref="searchQuery" :ignore-column="ignoreColumn" :search-handler="handleSearch" :select-ref-map="selectionMap" :page-column="resource.column"/>
    </div>

    <el-divider />

    <el-tabs v-model="activeTab" class="search-tabs">
      <el-tab-pane label="全局资源" name="global" default>
        <el-empty description="暂无资源" v-if="resource.data.length === 0" />
        <el-row :gutter="20" style="margin:0 15%" v-else>
          <el-col :span="6" v-for="course in resource.data" :key="course.resourceId">
            <ResourceCard :resource="course"/>
          </el-col>
        </el-row>
      </el-tab-pane>
<!--      <el-tab-pane label="你可能感兴趣的" name="preference">-->
<!--        <el-empty description="暂无" />-->
<!--      </el-tab-pane>-->
    </el-tabs>
    <el-pagination
        :current-page="pagination.current"
        :page-size="pagination.size"
        :page-sizes="[8, 12, 16, 20]"
        :total="pagination.total"
        class="pagination"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import MultiQuery from "@/components/MultiQuery.vue";
import api from "@/api/index.js";
import {ElMessage} from "element-plus";
import ResourceCard from "@/components/ResourceCard.vue";
const pagination = ref({
  current: 1,
  size: 8,
  total: 0
})
const handleSizeChange = (size) => {
  pagination.value.size = size
  handleSearch()
}
const handleCurrentChange = (current) => {
  pagination.value.current = current
  handleSearch()
}
const searchQuery = ref()
const activeTab = ref('global')
const resource = ref({column:[], data:[]})


const selectionMap  = ref(new Map())
const ignoreColumn = ref(['authorId','tags','imgPath'])
//authorId,tags,imgPath列不会加入可查询列中

const fetchCategory = () => {
  api.get('category/list').then(resp => {
    selectionMap.value.set('资源分类', resp.data.map(e=>{
      return {value: e.categoryId, label: e.categoryName}
    }))
    handleSearch();
  }).catch(e => {
    ElMessage.error("加载失败"+e)
  })
}
fetchCategory();
const handleSearch = () => {
  api.getPage('resource/search/page', {
    pageNum:pagination.value.current,
    pageSize:pagination.value.size
  }, searchQuery.value?searchQuery.value.querySearchBuilder:'').then(resp => {
    resource.value = resp.data
    console.log(resp.data)
    pagination.value.total = resp.data.total
  }).catch(e => {
    ElMessage.error("加载失败"+e)
  })
}

</script>

<style scoped>
.search-page {
  padding: 20px;
}

h2 {
  color: #a0d911;
  margin-bottom: 20px;
}

.search-container {
  max-width: 600px;
  margin: 0 auto 30px;
}

.search-tabs {
  margin-top: 20px;
}

:deep(.el-tabs__item) {
  font-size: 16px;
}

:deep(.el-tabs__active-bar) {
  background-color: #a0d911;
}

:deep(.el-tabs__item.is-active) {
  color: #a0d911;
}
</style>